/**
 * @module: 登录
 * @author: xiongsha
 * @date: 2020-05-26 18:42:08
 */
import React, { useState } from 'react';
import { Button, Toast } from 'antd-mobile';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request';
import './style.less';

const Login = (props:RouteComponentProps) => {
  const [phone, setPhone] = useState<string>('');

  const getYzm = () => {
    // 获取验证码
    if (!(/^1[3456789]\d{9}$/.test(phone))) {
      Toast.fail("手机号有误，请重新填写")
    } else {
      request('post','/wp-json/ec-visit/v1/send/sms', {
        phone
      }).then((res) => {
        console.log(res)
        const data = res.data
        if (data.code === 0) {
          props.history.push(`/yzm/${phone}`)
        }
        Toast.info(data.message)
      })
    }
  }

  return (
    <div className="login">
      <p className="title">手机动态码登录</p>
      <p className="tips">未注册的手机验证后将自动创建新账号</p>
      <div className="phone">
        <span className="phoneTips">手机号</span>
        <span className="phoneCode">+86 </span>
        <input
          placeholder="请输入你的手机号"
          value={phone}
          onChange={(e) => {
            setPhone(e.target.value);
          }}
          className="phoneInput"
          type="phone"
        />
      </div>
      <Button type="primary" onClick={getYzm}>获取验证码</Button>
      <Button type="ghost" className="cancelBtn"  onClick={()=>{setPhone('');}}>取消</Button>
      {/* <div className="cancelBtn" >取消</div> */}
      <div className="loginTips">
        登录即代表您同意 <span>用户协议</span>
      </div>
    </div>
  );
};

export default Login;
